<template>
  <div class="pay">
    <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        class="address"
    />
    <router-link to="/consignee" class="consignee iconfont">&#xe602;</router-link>
    <div class="productInfo">
      <div class="title">
        <p>商品信息</p>
      </div>
      <van-card
        class="prod"
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
      />
    </div>

    <!-- 优惠券单元格 -->
    <van-coupon-cell
      class="discount"
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>

    <van-cell-group>
      <van-cell title="商品合计" value="￥132.00" />
      <van-cell title="运费" value="￥0.00"/>
      <van-cell title="优惠券" value="￥0.00" />
      <van-cell title="匠币抵扣" value="￥0.00" />
      <van-cell title="活动优惠" value="￥0.00" />
    </van-cell-group>

    <van-submit-bar
      text-align="left"
      :price="3050"
      button-text="结算"
    />
  </div>
</template>

<script>

import { Toast } from 'vant'

const coupon = {
  id: 1, // 优惠券id
  discount: 0, // 折扣券 折值 整数 为0不显示折
  denominations: 2000, // 优惠券金额 单位分
  originCondition: 5000, // 满减规则金额 单位分 为0显示无门槛
  value: 12, // 折扣券优惠金额，单位分
  name: '新人大礼包', // 优惠券名称
  description: '喜欢你就用', // 描述信息
  reason: '订单未满200元', // 不可用原因，优惠券不可用时展示
  startAt: parseInt(1556337595530 / 1000), // 卡有效开始时间 (时间戳, 单位秒)
  endAt: parseInt(1559337595530 / 1000) // 卡失效日期 (时间戳, 单位秒)
}
// import coupon from '@/utils/coupon'

export default {
  name: 'Pay',
  data () {
    return {
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '13000000000',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true
        }
      ]
    }
  },
  methods: {
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(coupon)
    },
    onEdit (item, index) {
      Toast('编辑地址:' + index)
    }
    // handleToConsignee () {
    //   this.$router.push('/consignee')
    // }
  }
}
</script>
.
<style lang="less" scoped>
    /deep/.van-address-list__bottom{
        display: none;
    }
    /deep/.van-address-item__edit{
      display: none;
    }
    @white: #fff;
    .pay{
      // width: 90%;
      margin: 0 auto;
      background-color: #F9F9F9;
      padding-bottom: 70px;
      position: relative;
      .address{
        background-color: #F9F9F9;
        height: 120px;
      }
      .consignee{
        position: absolute;
        top: 46px;
        right: 30px;
        font-size: 26px;
        // color: #FC7A77;
      }
      .productInfo{
        margin-top: 10px;
        .title{
          padding-left: 20px;
          height: 50px;
          line-height: 50px;
          font-size: 12px;
          background-color: @white;
        }
        .prod{
          // border: 1px solid #ccc;
          background-color: @white;
        }
      }
      .discount{
        margin-top: 20px;
        margin-bottom: 20px;
        // border: 1px solid #ccc;
      }
    }
</style>
